---
title: Dynamic functions
---

import Seo from '../../../components/Seo.astro'
import Badge from '../../../components/Badge.astro'

<Seo
    seo={{
        title: 'Dynamic functions',
        description: 'Dynamic function in react-native-unistyles'
    }}
>

<Badge label="All platforms" />
<Badge label="2.0.0" />

If you need to pass a value from JSX to your `stylesheet` you can do so using a concept called `dynamic function`.

### Usage

To use a dynamic function, change your stylesheet's value from an `object` to a `function`:

```diff lang="tsx" del="container: {" ins="container: () => ({"
const stylesheet = createStyleSheet(theme => ({
    container: {
    container: () => ({
        backgroundColor: theme.colors.background,
        flex: 1,
        justifyContent: 'center,
        alignItems: 'center'
-    }
+    })
}))
```

Now, you can pass any number of arguments, all with TypeScript hints:

```tsx /maxWidth/ /isOdd/
export const Example = ({ maxWidth, isOdd, children }) => {
    const { styles } = useStyles(stylesheet)

    return (
        <View style={styles.container(maxWidth, isOdd)}>
            {children}
        </View>
    )
}

const stylesheet = createStyleSheet(theme => ({
    container: (maxWidth: number, isOdd: boolean) => ({
        backgroundColor: theme.colors.background,
        flex: 1,
        justifyContent: 'center,
        alignItems: 'center',
        maxWidth,
        borderBottomWidth: isOdd ? 1 : undefined
    })
}))
```

:::caution
It's worth mentioning that while using dynamic functions may be convenient, there are a few downsides to be aware of:
- On the web, styles created with dynamic functions are always inlined in the `style` attribute
- The `container` style from the example above will recompute the styles every time the component re-renders
:::

</Seo>
